import React, { PureComponent } from 'react';
import { Table, Form, Button, Input, Icon, notification, Modal } from 'antd';
import { connect } from 'dva';
import { worker } from "../../utils/worker"
import "./form.less"
class RoadDesign extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            selectedRowKeys: []
        }
        this.onSelectChange = this.onSelectChange.bind(this)
        this.getData = this.getData.bind(this)
        this.editRoad = this.editRoad.bind(this)
        this.deleteRoad = this.deleteRoad.bind(this)
        this.queryRoad = this.queryRoad.bind(this)
        this.massDelete = this.massDelete.bind(this)
        this.toUploadRoad = this.toUploadRoad.bind(this)
    }
    onSelectChange = selectedRowKeys => {
        this.setState({ selectedRowKeys });
    };
    componentDidMount() {
        this.getData()
    }
    toUploadRoad(e) {
        e.preventDefault()
        this.props.goInnerPage(null, "uploadRoads", "路线导入", null)
    }
    async getData() {
        let { current, dictlist, form ,queryProjectRoads} = this.props;
        const name = form.getFieldValue("roadName")
        let res = await queryProjectRoads({ projectId: current.id, name })
        if (res && res.length) {
            const len=res.length
            for (let i = 0; i < len; i++) {
                let item = res[i];
                item.roadTypeText = await worker.getDictName(dictlist, item.roadType)
            }
        }
        this.setState({
            data: res
        })
    }
    editRoad(e, item) {
        e.preventDefault()
        this.props.goInnerPage(null, "uploadRoads", "路线编辑", { code: "edit", roadId: item.id })
    }
    deleteRoad(e, item, mass, ids) {
        e.preventDefault()
        Modal.confirm({
            title: "提示",
            content: "是否删除此路线?",
            cancelText: "取消",
            okText: "确定",
            onOk:()=>{
                this.props.deleteRoad({ ids: mass ? ids : [item.id] }, async res => {
                    this.getData()
                    const {treeContext}=this.props
                    if(mass){
                        if(ids&&ids.length){
                            const len=ids.length
                            for (let i = 0; i < len; i++) {
                                let item = ids[i];
                               treeContext.removeTreeNode('group_road_unit' +item)
                            }
                        }
                    }else{
                        treeContext.removeTreeNode('group_road_unit' +item.id)
                    
                    }
                   
                }, err => {

                })
            },
            onCancel() {

            }
        })
    }
    queryRoad(e) {
        e.preventDefault();
        this.getData()
    }
    massDelete(e) {
        const { selectedRowKeys } = this.state;
        this.deleteRoad(e, null, true, selectedRowKeys)
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const { data, selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };

        const columns = [
            {
                title: '路线名称',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '文件类型',
                dataIndex: 'roadTypeText',
                key: 'roadTypeText',
            },
            {
                title: '路基宽度(m)',
                dataIndex: 'width',
                key: 'width',
            },
            {
                title: '操作',
                dataIndex: 'operate',
                key: 'operate',
                render: (text, record) => <span className="operate"><a onClick={(e) => this.editRoad(e, record)}><Icon type="edit" /><span>编辑路线</span></a> <a onClick={(e) => this.deleteRoad(e, record)}><Icon type="delete" /><span>删除路线</span></a></span>,
            },


        ];
        return (
            <div className="roadDesign">
                <div className="topNav">
                    <Form
                        style={{ marginTop: "20px",padding:"0",display:"flex",justifyContent:"flex-start" }}
                        labelCol={{ span: 8 }}

                        wrapperCol={{ span: 16 }}
                        labelAlign="right"
                    >
                        <Form.Item style={{ display:"flex"}} label='路线名称'>
                            {getFieldDecorator('roadName', {
                                rules: [

                                ]
                            })(
                                <Input allowClear style={{ width: "160px" }} placeholder="请输入路线名称" />
                            )}
                        </Form.Item>
                        <Button onClick={this.queryRoad} style={{ display:"flex", alignItems:"center",margin: "3px 0 0 20px" }} type="primary">查询</Button>
                    </Form>
                    <div>
                        <Button onClick={this.toUploadRoad} icon="plus" type="primary">导入路线</Button>
                        <Button disabled={!selectedRowKeys.length} onClick={this.massDelete} icon="delete" type="primary">删除路线</Button>
                    </div>
                </div>
                <div>
                    <Table scroll={{ y: 360 }} rowKey={record => record.id} pagination={false} rowSelection={rowSelection} dataSource={data} columns={columns} />
                </div>
            </div>
        )
    }
}
export default connect(
    ({ project: { current }, dict: { dictlist } }) => ({ current, dictlist }),
    dispatch => ({
        queryProjectRoads: (values) => dispatch({
            type: 'refRoads/queryProjectRoads',
            payload: values
        }),
        deleteRoad: (values, onSuccess, onError) => dispatch({
            type: 'refRoads/deleteRoad',
            payload: {
                values,
                onSuccess,
                onError
            }
        }),
        loadRefProjectRoads: (values) => dispatch({
            type: 'refRoads/loadRefProjectRoads',
            payload: values
        }),
    })
)(Form.create('roadDesign', {

})(RoadDesign));